<template>
  <div class="app-container">
    <!-- 查询条件 -->
    <el-form :inline="true" :model="searchObj" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="searchObj.ordersNumber" placeholder="订单号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchObj.begin"
          type="date"
          placeholder="选择开始日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchObj.end"
          type="date"
          placeholder="选择截止日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <!--点击查询按钮后提交到Onsubmit方法处理-->
      <el-button type="primary" @click="getByPage">查询</el-button>
      <el-button type="success" @click="reset">重置</el-button>
      <el-button type="danger" plain @click="deleteByIds">删除</el-button>
    </el-form>
    <!-- 表格 -->
    <el-table :data="list" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="订单流水号" width="200" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ordersNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="150" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ordersNotes }}</span>
        </template>
      </el-table-column>
      <el-table-column label="总金额" width="150" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ordersAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单详情" width="200" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ordersDetails }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="150" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">
            {{ scope.row.ordersStatus == '0' ? '待接单'
            :scope.row.ordersStatus == '1' ? '已接单'
            :scope.row.ordersStatus == '2' ? '已完成'
            :scope.row.ordersStatus == '3' ? '未支付'
            : "订单异常" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="预计等待时间(分钟)" width="200" align="center">
        <template slot-scope="scope">
          {{scope.row.ordersTime}}
          <!-- {{ formatCountdown(scope.row.ordersTime) }} -->
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            :disabled="buttonDisabledStatus(scope.row.ordersStatus)"
            @click="toPay(scope.row.ordersNumber)"
          >去支付</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页工具条 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script>
import orders from "@/api/orders";

export default {
  data() {
    return {
      isButtonClickable: true,
      multipleSelection: [], //存储被选中的每一个对象
      selectIds: "", //存储被选中的每一个对象的id
      listLoading: true, //是否显示loading信息
      list: [], //菜品数据列表
      page: 1, //页码
      limit: 10, //每页记录数
      total: 0, //总记录数
      currentPage: 1,
      searchObj: {},
      options: [
        {
          value: "0",
          label: "待商家接单"
        },
        {
          value: "1",
          label: "商家已接单"
        },
        {
          value: "2",
          label: "已完成"
        },
        {
          value: "3",
          label: "未支付"
        },
        {
          value: "4",
          label: "订单异常"
        }
      ],
      dish: {},
      dialogDishFormVisible: false,
      saveBtnDisabled: false //保存按钮是否禁用
    };
  },
  mounted() {
    this.getByPage();
    // this.startCountdown();
  },
  computed: { 
    buttonDisabledStatus(row) {
      return row => {
        if (row === 3) {
          return (this.isButtonClickable = false);
        } else {
          return (this.isButtonClickable = true);
        }
      };
    }
  },
  methods: {
    //开始倒计时
    // startCountdown(){
    //   setInterval(() => {
    //     this.list.forEach(list => {
    //       if(list.ordersTime > 0){
    //         list.ordersTime--;
    //       }
    //     })
    //   },1000)
    // },
    //时间格式化
    // formatCountdown(seconds){
    //   const minutes = Math.floor(seconds / 60)
    //   const remainingSeconds = seconds % 60
    //   return `${minutes}:${remainingSeconds.toString().padStart(2,)}`
    // },
    toPay(row) {
      this.$router.push({ path: `/orders/pay/${row}` });
    },
    reset() {
      this.searchObj = {};
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getByPage();
    },
    handleCurrentChange(val) {
      (this.page = val), this.getByPage();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //带条件的分页
    getByPage() {
      orders
        .getPageByCondition(this.page, this.limit, this.searchObj)
        .then(response => {
          this.list = response.data.pageInfo.records;
          // this.list.countdown=60
          console.log(this.list)
          this.total = response.data.pageInfo.total;
          this.listLoading = false;
        });
    },
    //批量删除菜品
    deleteByIds() {
      for (let i = 0; i < this.multipleSelection.length; i++) {
        let selectionElement = this.multipleSelection[i];
        if (i === this.selectIds.length - 1) {
          this.selectIds += selectionElement.id;
        } else {
          this.selectIds += selectionElement.id + ",";
        }
      }
      this.$confirm("此操作会永久删除数据，是否继续？", "确定删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          orders.deleteOrders(this.selectIds).then(response => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.getByPage();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>
